<template>
  <view class="wrap">
    <top-tab tabTitle="余额提现" @backClick="backClick" backColor="#5B2177"/>
		<view class="main">
			<view class="video-class">
				<!-- <view class="class-title">银行卡</view> -->
				<view class="picker-icons">
					<picker @change="towPickerChange($event,twoClass)" :value="twoIndex" :range="twoClass" :range-key="'label'">
						<view class="prcker-name">{{twoIndex>-1?twoClass[twoIndex].label:'请选择'}}</view>
					</picker>
					<uni-icons type="arrowdown" size="20"></uni-icons>
				</view>			
			</view>
			<view class="titel">提现金额</view>
			<input placeholder="请输入金额" v-model="drawFrom.amount" type="number" maxlength="6" class="uni-input" 
			placeholder-style="font-size: 28rpx;font-weight: 400;"/>
			<view class="money-record">
				<view>可提现金额：<text class="money ">{{drawFrom.beforeBalance}}</text>元</view>
				<view class="record" @click="withdrawals">提现记录</view>
			</view>
			<view class="item-text-all">
				<uni-icons type="info-filled" color="#F1A615" size="20"></uni-icons>
				<view class="text">每天单笔提现金额不可超过1万元，<text class="all-record" @click="allExtract">全部提现</text></view>
			</view>
			<view class="ben-record" @click="drawMoney">确认提现</view>
		</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
  export default {
		components: { topTab },
    data() {
      return {
				drawFrom:{ // 提现参数
					amount: '', // 提现金额
					bankCardId: '', // 所属银行
					beforeBalance: 0, // 提现前余额
				},
				twoIndex: -1, // 二级分类绑定的index
				twoClass: [] // 银行信息
			}
    },
  onLoad(paras) {
		if(paras) {
			this.drawFrom.beforeBalance = paras.balance
		}
		this.getBank()
	},
  methods: {
		// 银行卡信息
		async getBank() {
			const res = await $GET("/boke-pay/bankCard/queryList")
			this.twoClass = res.data.map(item => ({label: item.bankName, value: item.id}))
		},
		// 提现
	  async	drawMoney() {
			const res = await $POST("/boke-pay/withdraw/save",this.drawFrom)
			if(res.code === "0000000") {
				uni.navigateTo({
					url:'/pages/my/agency/wallet'
				})
				uni.showToast({title: "提交成功，待审核中！", icon:'none', duration:3000})
			}
		},
		// 全部提取
		allExtract() {
			this.drawFrom.amount  = this.drawFrom.beforeBalance
		},
		// 取款记录
		withdrawals() {
			uni.navigateTo({
				url: '/pages/my/agency/wallet'
			})
		},
		// 下拉框时间
		towPickerChange(e,item) {
			this.twoIndex = e.target.value
			this.drawFrom.bankCardId = this.twoClass[e.target.value].value // 银行id赋值
		},
		// 返回上一页
		backClick() {
			uni.navigateBack({})
		}
	}
}
</script>

<style lang="scss" scoped>
	.main{
		padding: 78rpx 30rpx;
		.video-class{
			width: 100%;
			display: flex;
			align-items:center
			.class-title{
				flex:2;
			}
			.picker-icons{
				flex:8;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx 0 26rpx;
			}
		}
		.titel{
			margin: 60rpx 0 20rpx 28rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #333333;
		}
		.uni-input{
			width: 100%;
			height: 50rpx;
			padding-left: 28rpx;
			font-size: 66rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #333333;
		}
		.money-record{
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #333333;
			.money{
				font-size: 34rpx;
				font-family: SourceHanSansCN;
				font-weight: 500;
				color: #F9103C;
			}
			.record{
				color: #808080;
			}
		}
		.item-text-all{
			padding: 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #B3B3B3;
			.text{
				margin-left: 12rpx;
			}
			.all-record{
				color: #0591CC;
			}
		}
		.ben-record{
			margin-top: 30rpx;
			width: 100%;
			height: 80rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 40rpx;
			line-height: 40px;
			text-align: center;
			font-size: 30rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		}
	}
</style>
